import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Image,
  TouchableOpacity,
  NativeModules,
  DeviceEventEmitter,
  PermissionsAndroid,
  Dimensions,
  Text
} from 'react-native';
import { getPixel } from '../common/utils'
import { Actions, InteractionManager } from "react-native-router-flux";
import ImagePicker from 'react-native-image-picker'
import ImageCropper from 'react-native-image-crop-picker'




const ocr = NativeModules.OcrModule;
const options = {
  title: 'Select Avatar',
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
  rotation: 90,
  noData: true,
};
const screenWidth = Dimensions.get('window').width
const screenHeight = Dimensions.get('window').height


export default class App extends Component {
  state = {
    question: '已知直线'
  }
  componentDidMount = () => {
    // Orientation.lockToPortrait();
    DeviceEventEmitter.once('init', result => {
      console.log(result)
    })
    // 通用文字识别
    DeviceEventEmitter.addListener('recGeneralBasic', (result) => {
      var res = JSON.parse(result.result)
      var question = ''
      res.words_result.forEach((item, index) => {
        question = question + item.words
      })
      Actions.answers({ question: question })
    })
    ocr.init()
  };

  render() {

    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <TouchableOpacity onPress={async () => {

          // ImagePicker.launchCamera(options, (response) => {
          //   ImageCropper.openCropper({
          //     path: response.uri,
          //     width: screenWidth,
          //     height: screenHeight,
          //     hideBottomControls: true,
          //     enableRotationGesture: false,
          //     freeStyleCropEnabled: true
          //   }).then(image => {
          //     ocr.recGeneralBasic(image.path.substr(7))
          //   });
          // })
          // this.lister.remove()
          // Actions.question()
          // Actions.answers()
          Actions.answers({ question: this.state.question })
        }}>
          <View style={{ height: getPixel(70), width: getPixel(70), borderRadius: getPixel(40), backgroundColor: '#ccc', justifyContent: 'center', alignItems: 'center' }}>
            <Image style={{ width: getPixel(50), height: getPixel(50) }} source={require('../../assets/images/photo.png')} />
          </View>
        </TouchableOpacity>
      </View >
    );
  }
}

const styles = StyleSheet.create({
  text: {
    marginLeft: 15,
    padding: 5,
    fontSize: 20,
  }
})
